<template>

  <v-container>

    <xy-header-top title='设置'>
      <v-btn icon slot="left" small @click="routerHome">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>

    <div class="custom-container">

      <div class="info-wrapper">

        <v-card class="mx-auto radius border pd-10" flat>
          <v-card-text>IMEI：86946502323715</v-card-text>
          <v-card-text>程序版本：{{version}}</v-card-text>
          <!-- <v-card-text>物料版本：2019-5-27 14:25</v-card-text> -->
          <v-card-text>门店：{{userContext.nickname}}</v-card-text>
        </v-card>

      </div>

      <div class="list-wrapper">

        <v-card flat class="border mgt-10">

          <!-- <xy-list icon='iconfont-icon iconprinter' text='打印空白标签' bgColor="#46a4f6" @click.native="handlerFun('0')"></xy-list> -->

          <!-- <xy-list icon='iconfont-icon iconhuojianxianxing' text='升级应用' bgColor="#0ea86f"></xy-list> -->

          <xy-list icon='iconfont-icon iconxiazai' text='更新物料库' bgColor="#c453fe"></xy-list>


          <xy-list icon='iconfont-icon iconwifi' text='打印机状态' bgColor="#4868df">
            <!-- 插槽 -->
            <span slot="status" v-if="isShowStatus" style="color:green;">已连接</span>
            <span slot="status" v-else style="color:red;">未连接</span>
          </xy-list>

          <!-- <xy-list icon='iconfont-icon iconbook' text='使用帮助' bgColor="#48a4f6"></xy-list> -->

          <!-- <xy-list icon='iconfont-icon iconkey' text='修改密码' bgColor="#f4ae49"></xy-list> -->

          <xy-list icon='iconfont-icon icontuichu' text='退出登录' bgColor="#f36260" @click.native="showConfirm"></xy-list>

        </v-card>

      </div>

      <div class="text-center">
        <v-bottom-sheet v-model="sheet">
          <!-- <template v-slot:activator="{ on }">
          <v-btn color="purple" dark v-on="on">
            Open In
          </v-btn>
        </template> -->
          <v-list style="padding:0">

            <v-list-item @click="logout" style="margin:0;border-bottom:1px solid #ddd;">
              <v-list-item-title class="text-center logout">退出登录</v-list-item-title>
            </v-list-item>

            <v-list-item @click="sheet = false" style="margin:0">
              <v-list-item-title class="text-center">取消</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-bottom-sheet>
      </div>

    </div>
  </v-container>


</template>

<script>
    import config from '../../../package';
    import {mapState} from 'vuex';
    import xyList from './ConfigurationList'

    /**
     * 设置
     * @author Canaan
     * @date 2019/8/10 18:28.
     */
    export default {
        name: 'configurationIndex',
        mounted() {

        },
        components: {
            xyList,

        },
        props: {},
        data: () => ({
            sheet: false,
            isShowStatus: true,
            model: 1,
        }),
        computed: {
            ...mapState([
                'userContext'
            ]),
            version() {
                return config.version;
            }
        },
        methods: {
            handlerFun(index) {

            },
            routerHome() {
                this.$router.push("/tastyIndex")
            },
            //退出登录
            logout() {
            },
            //底部选项
            showConfirm() {
                this.sheet = true
            },


        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .v-card__text {
    padding: 2px 10px;
    color: #000 !important;
  }

  .notConent,
  .logout {
    color: red;
  }

  .connected {
    color: green;
  }

  .radius {
    border-radius: 8px;
  }

  .v-list {
    padding: 0;
  }

  .mgt-10 {
    margin-top: 10px;
  }

  .border {
    border: 1px solid #ddd;
  }

  .custom-container {
    padding: 0;
    padding-top: 60px;
  }

  .info-wrapper {
    width: 100%;
    height: 74px;
    padding: 15px;
    background: linear-gradient(-90deg, #ff6c59 0%, #ff9859 100%);
    /* border-radius: 8px; */

  }

  .list-wrapper {
    margin-top: 30px;
    padding: 15px;
  }

  .container {
    padding: 0
  }

  .pd-15 {
    padding: 15px;
  }

</style>
